<template>
  <div class="setting">
    <h2>分类管理</h2>
    <el-button style="margin-bottom: 20px;" type="primary" size="mini" @click="addType">添加分类</el-button>

    <div class="consultation-block">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称" width="200px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              @click="updateType(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="deleteType(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="添加分类"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleAddClose"
    >
      <el-form
        :model="addForm"
        status-icon
        :rules="rules2"
        size="mini"
        ref="addForm"
        label-width="100px"
      >
        <el-form-item label="父级分类" prop="parentId">
          <el-select clearable v-model="addForm.parentId" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input :disabled="addForm.id" type="text" v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getType, addType, updateType, deleteType } from "../service.js";
import moment from "moment";

export default {
  data() {
    return {
      tableData: [],
      isVisible: false,
      rules2: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      typeList: [],
      currentPage: 1,
      pageSize: 1000,
      total: 0,
      addForm: {
        name: "",
        parentId: "",
      },
    };
  },
  mounted() {
    this.refreshTable();
  },
  methods: {
    handleAddClose() {
      this.isVisible = false;
    },
    addType() {
      this.addForm = {
        name: "",
        parentId: "",
      };
      this.isVisible = true;
    },
    refreshTable() {
      getType({
        page: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        console.log(res)
        this.tableData = res.data.data.filter((v) => !v.parentId);
        let son = res.data.data.filter((v) => v.parentId);
        for (let t of this.tableData) {
          let sons = son.filter(v => v.parentId == t.id)
          t.children = sons
        }
        this.typeList = res.data.data.filter((v) => !v.parentId);
      });
    },
    updateType(row) {
      this.addForm = JSON.parse(JSON.stringify(row));
      this.isVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addForm.id) {
            updateType(this.addForm.id, {
              ...this.addForm,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.isVisible = false;
                this.refreshTable();
              } else {
                this.$message.error(res.msg);
              }
            });
            // 编辑
          } else {
            addType(this.addForm).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.isVisible = false;
                this.refreshTable();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    deleteType(row) {
      console.log(row)
      if (row.children && row.children.length) {
        this.$message.error('存在子节点，无法直接删除')
        return
      }
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteType(row.id).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.isVisible = false;
            this.refreshTable();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: 1px dashed gray;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
.el-icon-circle-close {
  position: absolute;
  top: -5px;
  right: -5px;
  cursor: pointer;
  color: red;
}
</style>
